<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'ShowPicture.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		.show li{float: left;margin: 10px;}
		img{width: 50px;height: 100px;}
		.imgbig{width: 100px;height: 200px;}
	</style>
	
	<script type="text/javascript">
		$(function(){
			$("p").show(4000,function(){
		   		$(this).text("Animation Done...");
		 	});//与下面函数有相同的效果
			
			//$("p").toggle(4000,function(){
			 //  alert("Animation Done.");
			// });
		})
		$(function(){
			var x = 1;
			var y = 2;
			$("a.lyc").mouseover(function(event){
				this.myTitle = this.title;
				//this.title = "";
				var imgTitle = this.myTitle?"<br/>"+this.myTitle:"";
				var sdiv = "<div id='tooltip'  style='display: none;'><img src='"+this.href+"' alt='产品预览' class='imgbig'/>"+imgTitle+"</div>";
				$("body").append(sdiv);
				$("#tooltip").css({
					"top":(event.pageY+y)+"px",
					"left":(event.pageX+x)+"px",
					'position':'absolute'//'position':'absolute'要设置，否则位置不对
					}).fadeIn("normal");//show函数可以设置参数如：1000
			}).mouseout(function(){
				this.title = this.myTitle;
				$("#tooltip").remove();
			}).mousemove(function(event){
				$("#tooltip").css({"top": (event.pageY+y)+"px","left": (event.pageX+x)+"px",'position':'absolute'});
			});
		});
	</script>
  </head>
  
  <body>
  <p style="display: none">Hello</p>
   <div>
   		<ul class="show">
	   		<li><a href="http://localhost:8080/MyWeb/pic/1.jpg" class="lyc" title="111"><img src="http://localhost:8080/MyWeb/pic/1.jpg" alt="111-show"/></a></li>
	   		<li><a href="http://localhost:8080/MyWeb/pic/2.jpg" class="lyc" title="222"><img src="http://localhost:8080/MyWeb/pic/2.jpg" alt="222-show"/></a></li>
	   		<li><a href="http://localhost:8080/MyWeb/pic/3.jpg" class="lyc" title="333"><img src="http://localhost:8080/MyWeb/pic/3.jpg" alt="333-show"/></a></li>
	   		<li><a href="http://localhost:8080/MyWeb/pic/4.jpg" class="lyc" title="444"><img src="http://localhost:8080/MyWeb/pic/4.jpg" alt="444-show"/></a></li>
	   		<li><a href="http://localhost:8080/MyWeb/pic/5.jpg" class="lyc" title="555"><img src="http://localhost:8080/MyWeb/pic/5.jpg" alt="555-show"/></a></li>
   		</ul>
   </div>
   	<br>
   	<hr/>
		<div>
			<em>卡通动漫切换效果</em>
			<%@ include file="/showView.html"%>
   		</div>
  </body>
</html>
